<template>
  <div class="w-full" v-loading="loading">
    <el-button class="mb-16px" type="primary" @click="goCreate"
      >新增数据集</el-button
    >
    <div class="flex flex-wrap">
      <Card
        v-for="item in list"
        :key="item.id"
        :data="item"
        isCreator
        @click="goDetail(item.id)"
        @edit="goEdit(item.id)"
      />
      <el-pagination
        v-show="list.length"
        class="w-full justify-center"
        :total="total"
        layout="total, sizes, prev, pager, next"
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        :page-sizes="[15, 30, 60, 120]"
      ></el-pagination>
      <Empty v-if="!list.length" />
    </div>
  </div>
</template>

<script setup>
import Card from "@/views/dataSource/components/Card.vue";
import { usePage, useLoading } from "@/hooks";
import { useUserStore } from "@/store";

const $api = inject("$api");
const { loading, setLoading } = useLoading();
const { page, total } = usePage(15);

const userStore = useUserStore();

const list = ref([]);
const getMyModel = async () => {
  setLoading(true);
  try {
    const { data: rows, total: resTotal } = await $api.provide.getList({
      ...page.value,
      elementType: 1,
      createUserId: userStore.userInfo.userId,
    });
    list.value = rows;
    total.value = resTotal;
  } finally {
    setLoading(false);
  }
};

watch(
  () => page.value,
  () => {
    getMyModel();
  },
  {
    deep: true,
  }
);

const router = useRouter();
const goDetail = (id) => {
  router.push({
    name: "ModelDetail",
    query: {
      id,
      type: "dataSource",
    },
  });
};
const goEdit = (id) => {
  router.push({
    name: "CreateDataSource",
    query: {
      id,
    },
  });
};
const goCreate = () => {
  router.push({ name: "CreateDataSource" });
};

onMounted(() => {
  getMyModel();
});
</script>

<style lang="less" scoped>
:deep(.source-card) {
  width: calc((100% - 32px) / 3) !important;
  margin-right: 16px;
  &:nth-child(3n) {
    margin-right: 0;
  }
}
</style>
